<template>
<div id="guide">
    <p class="pic_title">邀请有礼操作步骤</p>
    <div id="picPanel" class="pic-panel">
        <div ref="picBox" class="pic-box">
            <ul id="picList" class="pic-list">
                <li class="re">
                    <img src="../images/1.jpg" />
                </li>
                <li>
                    <img src="../images/2.jpg" />
                </li>
                <li>
                    <img src="../images/3.jpg" />
                </li>
                <li>
                    <img src="../images/4.jpg" />
                </li>
                <li>
                    <img src="../images/5.jpg" />
                </li>
                <li>
                    <img src="../images/6.jpg" />
                </li>
                <li>
                    <img src="../images/7.jpg" />
                </li>
                <li>
                    <img src="../images/8.jpg" />
                </li>
                <li>
                    <img src="../images/9.jpg" />
                </li>
                <li>
                    <img src="../images/10.jpg" />
                </li>
            </ul>
        </div>
    </div>
</div>
</template>
<script>
import utils from "../../scripts/utils";
import photoSlide from "../../scripts/photoSlider";
export default {
  mounted() {
    photoSlide.photoSlide({
      wrap: this.$refs.picBox,
      loop: false,
      autoPlay: false,
      autoTime: 4000,
      pagination: true
    });
  }
};
</script>
<style>
.pagination {
  width: 100%;
  left: 0;
  bottom: -0.6rem;
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms;
  transition: 300ms;
  z-index: 10;
  transform: translate3d(0, 0, 0);
}

.pagination span {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #fff;
  opacity: 0.5;
  margin: 0 3px;
}

.pagination span.active {
  opacity: 1;
  background: #007aff;
}
</style>

<style scoped>
#guide {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: url("../images/bg.png") no-repeat;
  background-size: 100% 100%;
}
#picPanel img {
  display: block;
}

.pic-panel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.pic-list {
  width: 100%;
  position: relative;
}

.pic-list li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.pic-list .re {
  position: relative;
  z-index: 2;
}

.pic-list li img {
  width: 100%;
}

.pic-box {
  position: relative;
  top: 0;
  left: 10%;
  width: 80%;
}

.pic-list li:nth-child(2) {
  left: 100%;
}

.pic-list li:last-child {
  left: -100%;
}

.pic-list li img {
  padding: 0 0.2rem;
  box-sizing: border-box;
}

.pic_title {
  text-align: center;
  font-size: 0.56rem;
  margin: 0.3rem 0;
  color: #fff;
}
</style>
